<template>
<div>

<fieldset  class="scheduler-border">
  <legend class="scheduler-border" style=" margin-bottom:5px;text-align: center;">新建节目信息</legend>
  <div>
	 
  <div class="col-md-12" style="padding-right:0px;padding-left:0px;">
  <div class="col-md-3" style="padding-right:0px;padding-left:0px;">
  <ul class="nav nav-pills" id="materialinfo" style="background-color: #F7F7F7;top:50px;padding-left: 15px;margin-left: 0px;">
  <!-- <li role="presentation" class=""><a href="javacript:void(0);" ><img src="static/img/字体.png" style="width:36px" class="img-rounded"><br/><b>&nbsp;字幕</b></a></li>!-->
  <li role="presentation"><a href="#;"><img src="static/img/文本.png" style="width:36px" class="img-rounded"><br/><b>&nbsp;文本</b></a></li>
  <li role="presentation"><a href="#;"><img src="static/img/图片.png" style="width:36px" class="img-rounded"><br/><b>&nbsp;图片</b></a></li>
    <li role="presentation"><a href="#;"><img src="static/img/视频.png" style="width:36px" class="img-rounded"><br/><b>&nbsp;视频</b></a></li>
</ul>	
<ul class="nav nav-pills nav-stacked" id="material"  style="background-color:#ffffff;height:340px;overflow:auto;margin-left: 0px;">
	<div class="panel panel-primary"  style="margin-bottom: 0px">
    <div class="panel-heading">
        <h3 class="panel-title"><img src="static/img/手.png" class="img-rounded" style="width: 30px;">节目信息</h3>
    </div>
</div>
  <!-- <li><a href="javacript:void(0);">SVN</a></li>
    <li><a href="javacript:void(0);">iOS</a></li>
    <li><a href="javacript:void(0);">VB.Net</a></li>
    <li><a href="javacript:void(0);">Java</a></li>
    <li><a href="javacript:void(0);">PHP</a></li>1-->
</ul>
  </div>
  <div class="col-md-9"   style="border:1px solid #428bca;border-bottom:none;border-right:none;border-right:none;padding-left:0px;padding-right:0px;overflow: auto;">
 <div id="splitscreen" style="height:190px;background:#CDD3CA;overflow:auto;">
	      <div style="width:516px;height:190px;background-color: black;position:relative;margin: auto" id="program">

			
		  </div>
  </div>

<fieldset  class="scheduler-border" style="border:none;border-top: 1px solid rgb(66, 139, 202);display: none;">
  <legend class="scheduler-border" style=" margin-bottom: 0px"> 分区信息</legend>

  <form class="form-inline" role="form" style="display: none;">
	 
<!--	<div class="form-group col-md-3" style="display: none;">
		<label for="name" class="control-label">分区号</label>
	<input type="text" class="form-control" id="zeroindex"  placeholder="请输入分区号">
	</div>!-->
<div class="form-group col-sm-3">
		<label for="name" class="control-label">分区类型</label>
<select id="type"  style="width:196px" class="form-control">
	<option value="0">文字分区</option>
	<option value="1">图片分区</option>
	<option value="2">动画分区</option>
	</select>
	</div>
	<div class="form-group col-sm-3">
		<label for="name" class="control-label">左边起始位置</label>
<!--<input type="number" class="form-control" id="left" value="0"  placeholder="请输入左边起始位置"  min="0" max="1000" step="8" style="width:196px"/>-->

<div class="input-group spinner">  
    <input type="text" class="form-control" id="left" placeholder="请输入左边起始位置" value="0">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>

	</div>
   <div class="form-group col-sm-3">
		<label for="name" class="control-label">顶端起始位置</label>
<!-- <input type="number" class="form-control" id="top" value="0"  placeholder="请输入顶端起始位置" min="0" max="1000" step="0" style="width:196px"/>!-->

<div class="input-group spinner">  
    <input type="text" class="form-control" id="top" placeholder="请输入顶端起始位置" value="0">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>

	</div>
      <div class="form-group col-sm-3">
		<label for="name" class="control-label">宽度&nbsp;&nbsp;</label>
<!--	<input type="number" class="form-control" value="516" step="8" id="width"   style="width:196px"
				   placeholder="请输入宽度">!-->
<div class="input-group spinner">  
    <input type="text" class="form-control" id="width" placeholder="请输入宽度" value="516">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>

	</div>
    <div class="form-group col-sm-3">
		<label for="name" class="control-label">高度&nbsp;&nbsp;</label>
<!--	<input type="number" class="form-control" id="high"  value="190"  style="width:196px"
				   placeholder="请输入高度">!-->
<div class="input-group spinner">  
    <input type="text" class="form-control" id="high" placeholder="请输入高度" value="190">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>

	</div>
   <div class="form-group col-sm-3">
		<label for="name" class="control-label">进入方式</label>
	<!--<input type="text" class="form-control" id="intype" 
				   placeholder="请输入进入方式">!-->
         <select class="form-control" id="intype" style="width:196px">
									<option value="0">连续左移</option>	
										<option value="1">连续右移</option>	
											<option value="2">向左移入</option>	
												<option value="3">向右移入</option>
													<option value="4">向上移入</option>	
													<option value="5">向下移入</option>	
							</select>
	</div>
      <div class="form-group col-sm-3">
		<label for="name" class="control-label">进入速度</label>
	<!--<input type="number" class="form-control" id="inspeed" 
				   placeholder="请输入进入速度">!-->

<div class="input-group spinner">  
    <input type="text" class="form-control" id="inspeed" placeholder="请输入进入速度" value="0">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>


	</div>
        <div class="form-group col-sm-3">
		<label for="name" class="control-label">字体颜色</label>
	<!--<input type="text" class="form-control" id="fontcolor" 
				   placeholder="请输入字体颜色">!-->
     <select class="form-control" id="fontcolor" style="width:196px">
											<!--	<option value="1">红色</option>
													<option value="0">黑色</option>
													<option value="2">绿色</option>
														<option value="3">蓝色</option>
														<option value="4">灰色</option>
														<option value="5">白色</option>!-->
														<option value="#FF0000">红色</option>
                                         	<option value="#000000">黑色</option>
													 	
													<option value="#00FF00">绿色</option>
														<option value="#0000FF">蓝色</option>
														<option value="#C0C0C0">灰色</option>
														<option value="#FFFFFF">白色</option>
                               

							</select>
	</div>
       <div class="form-group col-sm-4">
		<label for="name" class="control-label">字体大小</label>
				   <select id="fontsizeadd" style="width:196px" class="form-control">
					   <option value="16">16px</option>
					     <option value="24">24px</option>
					    <option value="32">32px</option>
						<option value="48">48px</option>
						<option value="64">64px</option>
				   </select>
	</div>






   <div class="form-group col-sm-4">
		<label for="name" class="control-label">背景颜色</label>
     <select class="form-control" id="backcolor" style="width:196px">
											<option value="#000000">黑色</option>
													 	<option value="#FF0000">红色</option>
													<option value="#00FF00">绿色</option>
														<option value="#0000FF">蓝色</option>
														<option value="#C0C0C0">灰色</option>
														<option value="#FFFFFF">白色</option>
							</select>

	</div>
	   <div class="form-group col-sm-4">
		<label for="name" class="control-label">停留时间</label>
	<!--	<input type="number" class="form-control" value="0" id="staytime" placeholder="请输入停留时间" min="0" max="1000" step="0" style="width:196px"/>!-->


<div class="input-group spinner">  
    <input type="text" class="form-control" id="staytime" placeholder="请输入停留时间" value="0">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>

	</div>


    <div class="form-group col-md-5">
		<textarea rows="2" id="fosizeval" cols="135" placeholder="输入文本内容" class="form-control"></textarea>
	

	</div>

<div class="form-group col-sm-10" style="display: none;" id="imgadd">
	<label for="name" class="control-label">上传图片</label>
      <input type="file" id="file1"  name="file" accept="image/jpeg,image/jpg,image/png"/>
      <input type="hidden" id="hfile1"/>
	</div>
    <div class="form-group col-sm-10" style="display: none;" id="imgaddgif">
	<label for="name" class="control-label">上传动画图片</label>
      <input type="file" id="file2" name="file" accept="image/gif" />
 <input type="hidden" id="hfile2"/>
	</div>
</form>    
</fieldset>
<fieldset  id="fqfrom"  class="scheduler-border" style="border:none;border-top: 1px solid rgb(66, 139, 202)">
  <legend class="scheduler-border" style=" margin-bottom: 0px"> 节目信息</legend>
  <div>
  <div class="col-md-12">
<form class="form-inline" role="form">
<div class="form-group col-sm-3">
		<label for="name" class="control-label">订单&nbsp;&nbsp;</label>
	<input type="text" class="form-control" readonly="readonly" id="order" 
				   placeholder="请选择订单"  value="1">
	</div>
	<div class="form-group col-sm-3">
		<label for="name" class="control-label">节目名称</label>
	<input type="text" class="form-control" id="festivalname" 
				   placeholder="请输入节目名称">
	</div>
	<div class="form-group col-sm-3">
     <label for="firstname" class="control-label">节目类型</label>
		<select title="" class="form-control" id="type" style="width:196px">
			<option value="0">公益广告</option> 
			<option value="1">商业广告</option>
			<option value="2">即时节目</option>
			<option value="3">简短固定广告</option>
			</select>
		<!--<input type="text" class="form-control" id="name" 
			   placeholder="请输入名称">!-->
	</div>
	<div class="form-group col-sm-3">
		<label for="name" class="control-label">节目播放类型</label>
<select title="" id="playtype" class="form-control" style="width:196px">
	<option value="0">次数</option> 
	<option value="1">时间</option>
	</select>
	</div>
	<div class="form-group col-sm-3">
		<label for="name" class="control-label">节目单次播放</label>
<select title="" id="playtime" class="form-control" style="width: 196px;"><option value="0">255</option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option></select>
	</div>
	<div class="form-group col-sm-3">
		<label for="name" class="control-label">播放起始日期</label>
	<input type="text" class="date_picker input form-control" id="starttime" onfocus=this.blur()
				   placeholder="请输入播放起始日期">
	</div>
		<div class="form-group col-sm-3">
		<label for="name" class="control-label">播放结束日期</label>
	<input type="text" class="date_picker input form-control" id="endtime"   onfocus=this.blur()
				   placeholder="请输入播放结束日期">

				   
	</div>
		<div class="form-group col-sm-3">
		<label for="name" class="control-label">开始时间段</label>
<div class="input-group clockpicker" style="float:left;">
<!--<select title="" id="timeid" class="form-control" style="width:196px">
</select>-->
<input type="text" id="timeid" class="form-control" placeholder="请输入开始时间段" />

					</div>
	</div>
		<div class="form-group col-sm-3">
		<label for="name" class="control-label">结束时间段</label>

<div class="input-group clockpicker" style="float:left;">
			
					
		<!--	<select title="" id="starthour" class="form-control" style="width:196px">
</select>!-->
<input type="text" id="starthour" class="form-control" placeholder="请输入结束时间段" />

					</div>


	</div>
<div class="form-group col-sm-3">
<label for="name" class="control-label">设备类型</label>
<select title="" id="devicetype" class="form-control" style="width:196px">
  <option value="0">单色</option> 
  <option value="1">双色</option>
  <option value="2">全彩</option> 
  <option value="3">安卓</option>
	</select>
	</div>
	<div class="form-group col-sm-3">
		<label for="name" class="control-label">播放语音</label>
<select title=""  id="isplayvoice" class="form-control" style="width:196px"><option value="1">开启</option> <option value="0">关闭</option></select>
	</div>


    <div class="form-group col-sm-3">
		<label for="name" class="control-label">宽度</label>
	<!--<input type="number" class="form-control" value="516" step="8" id="jwidth" 
				   placeholder="请输入宽度">!-->

 <div class="input-group spinner">  
    <input type="text" class="form-control" id="jwidth" placeholder="请输入宽度" value="516">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>  

	</div>

    <div class="form-group col-sm-3">
		<label for="name" class="control-label">高度&nbsp;&nbsp;</label>
	<!--<input type="number" class="form-control" value="190" id="jhigh" 
				   placeholder="请输入高度">!-->
				   <div class="input-group spinner">  
        <input type="text" class="form-control" id="jhigh" placeholder="请输入高度" value="190">  
   <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  
	</div>

	</div>

</form>
  </div>
  </div>
  </fieldset>
</div>


<!-- 323232!-->
  </div>

</div>
  </fieldset>
  <center>  <button type="button" class="btn btn-primary" id="addjm">保存</button>


  </center> 
</div>
</template>
<style >

@import '../../../../static/css/time/timePicker.css';


/*-----------------------------------------------------------------------------------*/

#materialinfo b{
 color:#F00;
}
fieldset.scheduler-border
{
	border: 1px solid #428bca;

	/*padding: 0em 1.4em 1.4em 1.4em !important;*/
	margin: 0 0 0.8em 0 !important;
	-webkit-box-shadow: 0px 0px 0px 0px #000;
	box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border
{
	width: inherit; /* Or auto */
	padding: 0 10px; /* To give a bit of padding on the left and right */
	border-bottom: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 900;
	background-color: #428bca;
	color: #fffffb;
	border-radius: 10px;
}
.transparent_class {  
    
}


/*-----------------------------------------------------------------------------------*/
.spinner {  
  width: 196px;  
}  
.spinner input {  
  text-align: right;  
}  
.input-group-btn-vertical {  
  position: relative;  
  white-space: nowrap;  
  width: 1%;  
  vertical-align: middle;  
  display: table-cell;  
}  
.input-group-btn-vertical > .btn {  
  display: block;  
  float: none;  
  width: 100%;  
  max-width: 100%;  
  padding: 8px;  
  margin-left: -1px;  
  position: relative;  
  border-radius: 0;  
}  
.input-group-btn-vertical > .btn:first-child {  
  border-top-right-radius: 4px;  
}  
.input-group-btn-vertical > .btn:last-child {  
  margin-top: -2px;  
  border-bottom-right-radius: 4px;  
}  
.input-group-btn-vertical i{  
  position: absolute;  
  top: 0;  
  left: 4px;  
}  

 </style>
<script>
import    '../../../../static/js/time/jquery.date_input.pack.js';
import    '../../../../static/js/drag.js';
import    '../../../../static/js/time/jquery-timepicker.js';
export default {
 data() {
  return {
   
  };
 },
 created () {
    
 },
 methods: {
        //坐标转换完之后的回调函数
 },
 mounted() {
  this.$nextTick(function() {
    //  alert( this.drawMap());
  // this.drawMap();
 });
 }
};


//删除分区
window.del=function(thi){

  $(thi).parent().parent().remove();
  
//alert( $("#from_"+$(thi).parent().parent().attr("id")).parent().html());

  $("#from_"+$(thi).parent().parent().attr("id")).parent().remove();

	 $("#program_"+$(thi).parent().parent().attr("id")).remove();
	
	 if($("#program").find("div").length==0){
     
     $(".panel-heading").click(); 
    // $("#splitscreen").css("height",420);

	 }else{

		 $("#material li").click();
	 }
};
var selectid="";//选择的分区
$(function(){ 
 //for ( var i = 0; i < 24; i++)
      //  {
		 //var opt = document.getElementById("timeid");
	//	  var min = document.getElementById("starthour");
	    // $("#timeid,#starthour").append("<option id="+i+">"+i+""+"</option>");
		//}
		$("#timeid,#starthour").hunterTimePicker();
		


  $('.spinner .btn:first-of-type').eq(6).on('click', function() {  

   $('#jwidth').val(parseInt($('#jwidth').val()) + 8);  

$("#program").css("width",$("#jwidth").val());
  //console.log($("#program div").css("left"));
  $("#program div").each(function(){
     var reg = new RegExp("px","g");
	if(parseInt($("#jwidth").val())<parseInt($(this).css("width"))){
	  $("#program").css("width",$(this).css("width"));
	 $('#jwidth').val($(this).css("width").replace(reg, ""));
	}
	}); 

	setTimeout(function(i){
	 $("#program div").each(function(i){
     var reg = new RegExp("px","g");
   // console.log($("#program").css("margin-left"));
	$(this).css("left",'');
	 $(this).find("#leftdw").val($(this).css("left").replace(reg, ""));
	 i=i+1;

	 $(".col-md-9").find(".form-inline").find("#left").val(0);

	}),100});

  });  
  $('.spinner .btn:last-of-type').eq(6).on('click', function() {  
  //  $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 8);  
  //$('#jwidth').val(parseInt($('#jwidth').val()) + 8);  

 $('#jwidth').val(parseInt($('#jwidth').val()) -8);  

$("#program").css("width",$("#jwidth").val());
  //console.log($("#program div").css("left"));
  $("#program div").each(function(){
     var reg = new RegExp("px","g");
	if(parseInt($("#jwidth").val())<parseInt($(this).css("width"))){
	  $("#program").css("width",$(this).css("width"));
	 $('#jwidth').val($(this).css("width").replace(reg, ""));
	}
	}); 

	setTimeout(function(i){
	 $("#program div").each(function(i){
     var reg = new RegExp("px","g");
   // console.log($("#program").css("margin-left"));
	$(this).css("left",'');
	 $(this).find("#leftdw").val($(this).css("left").replace(reg, ""));
	 i=i+1;

	 $(".col-md-9").find(".form-inline").find("#left").val(0);

	}),100});
	 
	 

  });  
  $('.spinner .btn:first-of-type').eq(7).on('click', function() {  
 // return;
   $('#jhigh').val(parseInt($('#jhigh').val()) +1);  
   // if($("#jhigh").val()>190){
 // $("#jhigh").val(190);
 // $("#program").css("height",190);
  //return;
//}else{
  $("#program").css("height",$("#jhigh").val());
$("#program").find("div").css("top","0px");
  
//}

  });
  $('.spinner .btn:last-of-type').eq(7).on('click', function() {  
	  //return;
 $('#jhigh').val(parseInt($('#jhigh').val())-1);  
   //   $('#jhigh').val(parseInt($('#jhigh').val())-1);  
 //   if($("#jhigh").val()>190){
 // $("#jhigh").val(190);
  //$("#program").css("height",190);
 // return;
//}else{
  $("#program").css("height",$("#jhigh").val());
  $("#program").find("div").css("top","0px");
//}
});
//节目信息 宽 高
$("#jwidth").blur(function(){
//alert($('#program').position().left);
//$('#jwidth').bind('input propertychange', function() {
  //var widthzt=true;
  $("#program").css("width",$("#jwidth").val());
  //console.log($("#program div").css("left"));
  $("#program div").each(function(){
     var reg = new RegExp("px","g");
	if(parseInt($("#jwidth").val())<parseInt($(this).css("width"))){
	  $("#program").css("width",$(this).css("width"));
	 $('#jwidth').val($(this).css("width").replace(reg, ""));
	}
	}); 

	setTimeout(function(i){
	 $("#program div").each(function(i){
     var reg = new RegExp("px","g");
   // console.log($("#program").css("margin-left"));
	$(this).css("left",'');
	 $(this).find("#leftdw").val($(this).position().left+"px".replace(reg, ""));
	 i=i+1;

	 $(".col-md-9").find(".form-inline").find("#left").val(0);

	}),100});
});
$("#jhigh").blur(function(){
//$('#jhigh').bind('input propertychange', function() {
//if($("#jhigh").val()>190){
 // $("#jhigh").val(190);
 // $("#program").css("height",190);
 // return;
//}else{
  $("#program").css("height",$("#jhigh").val());

   $("#program div").css("height",$("#jhigh").val());
//}
}); 
//添加分区
var guid="";
selectid=guid;
$("#materialinfo li a").click(function(){
guid=uuid();
selectid=guid;
$("#material li").removeAttr("style");
 $("#material").append("<li id="+guid+"  style=background-color:#eee;><a href='#;'><img src="+$(this).find("img").attr("src") +" class='img-rounded' style='width: 25px;'>"+$(this).text()+"<img src='static/img/del.png' style='width:26px;float:right;' onclick=del(this) class='img-rounded'></a></li>");
//alert($(".form-inline").eq(1).html());
//<form class="form-inline" role="form" 
//添加分区信息
//alert($(this).text());
$("#fqfrom").hide();

$(".col-md-9").find(".scheduler-border").hide();

//$(".col-md-9").find(".form-inline").hide();
//$("#splitscreen").css("height",$("#jhigh").val()+"px");
console.log($(this).text());
if($(this).text()==" 文本"){
//$(".col-md-9").append("<form class='form-inline' id=from_"+guid+" role='form'>"+$(".form-inline").eq(1).html()+"</from>");

$(".col-md-9").append("<fieldset  class=scheduler-border style='border:none;border-top: 1px solid rgb(66, 139, 202);'><legend class='scheduler-border' style='margin-bottom: 0px'>分区信息</legend><form class='form-inline' id=from_"+guid+" role='form'>"+$(".col-md-9").find(".form-inline").eq(0).html()+"</from></fieldset>");


$("#from_"+guid).find("#backcolor").parent().removeClass("col-sm-3");
$("#from_"+guid).find("#backcolor").parent().addClass("col-sm-4");

$("#from_"+guid).find("#type").val(0);



}
if($(this).text()==" 图片"){

//$(".col-md-9").append("<form class='form-inline' id=from_"+guid+" role='form'>"+$(".form-inline").eq(1).html()+"</from>");


$(".col-md-9").append("<fieldset  class=scheduler-border style='border:none;border-top: 1px solid rgb(66, 139, 202);'><legend class='scheduler-border' style='margin-bottom: 0px'>分区信息</legend><form class='form-inline' id=from_"+guid+" role='form'>"+$(".col-md-9").find(".form-inline").eq(0).html()+"</from></fieldset>");


$("#from_"+guid).find("#backcolor").parent().removeClass("col-sm-4");
$("#from_"+guid).find("#backcolor").parent().addClass("col-sm-3");


//alert($("#backcolor").parent());
//alert(123);

$("#from_"+guid+"").find("#fontcolor").parent().remove();
$("#from_"+guid+"").find("#fontsizeadd").parent().remove();
$("#from_"+guid+"").find("#fosizeval").parent().remove();
  //fontcolor    

$("#from_"+guid+"").find("#imgadd").show();

$("#from_"+guid+"").css("height",230);$("#from_"+guid).find("#type").val(1);
}
if($(this).text()==" 视频"){

//fqfrom




$(".col-md-9").append("<fieldset  class=scheduler-border style='border:none;border-top: 1px solid rgb(66, 139, 202);'><legend class='scheduler-border' style='margin-bottom: 0px'>分区信息</legend><form class='form-inline' id=from_"+guid+" role='form'>"+$(".col-md-9").find(".form-inline").eq(0).html()+"</from></fieldset>");

$("#from_"+guid).find("#type").val(2);
//alert(123);

$("#from_"+guid+"").find("#fontcolor").parent().remove();
$("#from_"+guid+"").find("#fontsizeadd").parent().remove();
$("#from_"+guid+"").find("#fosizeval").parent().remove();
  //fontcolor    
$("#from_"+guid).find("#backcolor").parent().removeClass("col-sm-4");
$("#from_"+guid).find("#backcolor").parent().addClass("col-sm-3");
$("#from_"+guid+"").find("#imgaddgif").show();

$("#from_"+guid+"").css("height",230);


}
$("#from_"+guid).find("#type").attr("disabled","disabled");

$(".panel-heading").click(function(){
$(".col-md-9").find(".scheduler-border").hide();
$("#fqfrom").show();$("#fqfrom").find('.scheduler-border').show();
});

$("#material li").eq($("#program").find("div").length).click(function(){

selectid=$(this).attr("id");

var indx=$(this).index();
$("#material li").removeAttr("style");
$(this).css("background-color","#eee");
//$("#fqfrom").hide();

$(".col-md-9").find(".scheduler-border").hide();

//$(".col-md-9").find(".form-inline").hide();
//alert($("#from_"+selectid).parent().html());
$("#from_"+selectid).parent().show();
$("#from_"+selectid).parent().find('.scheduler-border').show();

$("#program_"+selectid).css("z-index",$("#program").find("div").length);
//重新排列分区
//$("#material li")

$("#material li").each(function(i){
	  var ifi=i+1;
	 if(ifi!=indx){
     $("#program_"+$(this).attr("id")).css("z-index",i);
	 }
   //alert($(this).attr("id"));
});
});
var fqvalue="<div id=program_"+ guid+" class='transparent_class' style='top:0px;position: absolute;z-index:"+$("#program").find("div").length+";border:2px dashed #FFFFFF; width:"+$("#jwidth").val()+"px; height:"+$("#jhigh").val()+"px; background-color: black;'> <input type='hidden' id='leftdw'/></div>";
$("#program").append(fqvalue);

$('#from_'+selectid).find("#width").val($("#jwidth").val());

// ("#jwidth").val()
$('#program_'+selectid).css("background-color",$('#from_'+selectid).find("#backcolor").val());

//alert($('#program_'+selectid).position().left);



var leftwz=$('#program_'+selectid).position().left+"px";


 var reg = new RegExp("px","g");
 leftwz = leftwz.replace(reg, "");

$('#program_'+selectid).find("#leftdw").val(leftwz);

//$( "#draggable3" ).draggable({  });
var  counts = [ 0, 0, 0 ];
 $('#program_'+selectid).draggable({
	 containment: "#program", scroll: false,
      start: function() {
	   var  valid=$(this).attr("id");
	   valid=valid.split('_');
	 //  alert(valid[1]);
     //console.log();
      selectid=valid[1];
		counts[ 0 ]++;
		console.log($(this).attr("id"));
	   // updateCounterStatus( $start_counter, counts[ 0 ] );
      },
      drag: function() {
		//counts[ 1 ]++;
		//console.log($('#program_'+selectid).css("left"));
      },
      stop: function() {
		  
		counts[ 2 ]++;
var left=$('#program_'+selectid).css("left");

var top=$('#program_'+selectid).css("top");

 var reg = new RegExp("px","g");
 left = left.replace(reg, "");

//alert($('#program_'+selectid).find("#leftdw").val());
//alert($('#program_'+selectid).find("#leftdw").val());

left=parseInt(left)-parseInt($('#program_'+selectid).find("#leftdw").val());


 //left=parseInt(left)-parseInt(leftwz);
$('#from_'+selectid).find("#left").val(left);
 top = top.replace(reg, "");

$('#from_'+selectid).find("#top").val(parseInt(top));
} 
});
//节目信息分区 宽 高
$('#from_'+selectid).find("#width").bind('input propertychange', function() {

  if(parseInt($('#from_'+selectid).find("#width").val())>parseInt($("#jwidth").val())){

$('#from_'+selectid).find("#left").val(0);
  $("#program_"+selectid).css("width",$("#jwidth").val());
$('#from_'+selectid).find("#width").val($("#jwidth").val());


  if($("#program_"+selectid).find("img").val()==""){

     $("#program_"+selectid).find("img").css("width",parseInt($('#from_'+selectid).find("#width").val())-4);
   
   }
// $('#program_'+selectid).css("left",leftwz+"px");

$('#program_'+selectid).css("left",$('#program_'+selectid).find("#leftdw").val()+"px");
return;
  }else{




$("#program_"+selectid).css("width",$('#from_'+selectid).find("#width").val());

   if($("#program_"+selectid).find("img").val()==""){

     $("#program_"+selectid).find("img").css("width",parseInt($('#from_'+selectid).find("#width").val())-4);
   
   }

   if(parseInt($('#from_'+selectid).find("#width").val())==parseInt($("#jwidth").val())){


  //console.log(leftwz);

	 $('#from_'+selectid).find("#left").val(0);


     // console.log($("#program").css("left"));

	  //$('#program_'+selectid).css("left",leftwz+"px");
          $('#program_'+selectid).css("left",$('#program_'+selectid).find("#leftdw").val()+"px");

	
	  
	 // return;
}


var left=parseInt($('#from_'+selectid).find("#left").val())+parseInt($('#from_'+selectid).find("#width").val());
if(left>$("#jwidth").val()){
//left=parent(left)-parseInt($("#jwidth").val());
var reg = new RegExp("px","g");

//console.log(left);

//left=parseInt($('#program_'+selectid).css("left").replace(reg, ""))-parseInt(left);


left=parseInt($('#program_'+selectid).css("left").replace(reg, ""))-parseInt($('#from_'+selectid).find("#left").val());


console.log(left);
	 $('#from_'+selectid).find("#left").val(0);
$("#program_"+selectid).css("left",left+"px");

//$('#from_'+selectid).find("#width").val( $("#jwidth").val());


//$('#from_'+selectid).find("#width").val(parseInt($("#jwidth").val())-parseInt($('#from_'+selectid).find("#left").val()));
//$("#program_"+selectid).css("width",parseInt($("#jwidth").val());
       //console.log(left);
   }
  }
   //if(){
  // }
 }); 
$('#from_'+selectid).find("#high").bind('input propertychange', function() {

  if(parseInt($('#from_'+selectid).find("#high").val())>parseInt($("#jhigh").val())){

		$("#program_"+selectid).css("height",$("#jhigh").val()+"px");
		$('#from_'+selectid).find("#high").val($("#jhigh").val());
      
     if($("#program_"+selectid).find("img").val()==""){


	 $("#program_"+selectid).find("img").css("height",$("#jhigh").val()+"px");
	 
	  $("#program_"+selectid).find("img").css("height",parseInt($("#jhigh").val())-4+"px");
	// console.log("ok");
   //$('#from_'+selectid).find("#top").val(0);
     
   }
   $('#from_'+selectid).find("#top").val(0);
 $('#program_'+selectid).css("top",0+"px");
		return;
  }
  $("#program_"+selectid).css("height",$('#from_'+selectid).find("#high").val());

   if($("#program_"+selectid).find("img").val()==""){

   $("#program_"+selectid).find("img").css("height",parseInt($('#from_'+selectid).find("#high").val())-4);
  
   }
var top=parseInt($('#from_'+selectid).find("#top").val())+parseInt($('#from_'+selectid).find("#high").val());

//console.log(top);

if(top>$("#jhigh").val()){
 var reg = new RegExp("px","g");
  top=parseInt($('#program_'+selectid).css("top").replace(reg, ""))-parseInt($('#from_'+selectid).find("#top").val())
  $("#program_"+selectid).css("top",top+"px");
$('#from_'+selectid).find("#top").val(0);

}

   if(parseInt($('#from_'+selectid).find("#high").val())==parseInt($("#jhigh").val())){


  //console.log(leftwz);

	 $('#from_'+selectid).find("#top").val(0);


     // console.log($("#program").css("left"));

	  $('#program_'+selectid).css("top",0+"px");


	
	 // return;
}


}); 
//节目信息分区 x y
$('#from_'+selectid).find("#left").bind('input propertychange', function() {
var left=parseInt($("#jwidth").val())-parseInt($('#from_'+selectid).find("#width").val());

//var lefttow=parseInt(leftwz)+parseInt($('#from_'+selectid).find("#left").val());
var lefttow=parseInt($('#program_'+selectid).find("#leftdw").val())+parseInt($('#from_'+selectid).find("#left").val());


if($('#from_'+selectid).find("#left").val()>left){

	 $('#from_'+selectid).find("#left").val(left)
	 // left=parseInt(leftwz)+parseInt(left);
	  left=parseInt($('#program_'+selectid).find("#leftdw").val())+parseInt(left);

     $("#program_"+selectid).css("left",left+"px");
	// $("#program_"+selectid).css("margin-left",left+"px");

	 return;
}

$("#program_"+selectid).css("left",lefttow+"px");
 // $("#program_"+selectid).css("margin-left",$('#from_'+selectid).find("#left").val()+"px");
}); 
$('#from_'+selectid).find("#top").bind('input propertychange', function() {

var topvalue=parseInt($("#jhigh").val())-parseInt($('#from_'+selectid).find("#high").val());

//var toptow=parseInt(leftwz)+parseInt($('#from_'+selectid).find("#top").val());

if($('#from_'+selectid).find("#top").val()>topvalue){
 // alert(top);
//	 $("#program_"+selectid).css("margin-top",topvalue+"px"); 
//topvalue==parseInt(leftwz)+$('#from_'+selectid).find("#top").val();
topvalue==parseInt($('#program_'+selectid).find("#leftdw").val())+parseInt($('#from_'+selectid).find("#top").val());

 $("#program_"+selectid).css("top",topvalue+"px"); 
	 $('#from_'+selectid).find("#top").val(topvalue);
	//
	return;
}
 // $("#program_"+selectid).css("margin-top",$('#from_'+selectid).find("#top").val()+"px");
$("#program_"+selectid).css("top",$('#from_'+selectid).find("#top").val()+"px");
}); 
//字体输入
$('#from_'+selectid).find("textarea").bind('input propertychange', function() {
	$("#program_"+selectid).css("color",$('#from_'+selectid).find("#fontcolor").val()).css("font-size",$('#from_'+selectid).find("#fontsizeadd").val()+"px").css("overflow","hidden")
	.css("white-space","pre");

    

     $("#program_"+selectid).html($('#from_'+selectid).find("textarea").val()+"<input type='hidden' id='leftdw' value="+$("#program_"+selectid).find("#leftdw").val()+">");
});
//字体颜色
 $('#from_'+selectid).find("#fontsizeadd").change(function(){
	$("#program_"+selectid).css("font-size",$(this).val()+"px")
 // $(this).css("background-color","#FFFFCC");
});
//字体大小
$('#from_'+selectid).find("#fontcolor").change(function(){
	$("#program_"+selectid).css("color",$(this).val());
 // $(this).css("background-color","#FFFFCC");
});
//背景颜色
$('#from_'+selectid).find("#backcolor").change(function(){
	$("#program_"+selectid).css("background-color",$(this).val());
 // $(this).css("background-color","#FFFFCC");
});

//预览图片
$('#from_'+selectid).find("#file1").change(function() {
	            var file = this.files[0];   	         
                // 确认选择的文件是图片                
                if(file.type.indexOf("image") == 0) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);                    
                    reader.onload = function(e) {
                        // 图片base64化
						var newUrl = this.result;
				//	alert(newUrl);    
			$("#program_"+selectid).html("<img src='"+newUrl +"'  class='img-rounded' style=height:"+$("#from_"+selectid).find("#high").val()+"px;width:"+parseInt($("#from_"+selectid).find("#width").val()-4)+"px;>"+"<input type='hidden' id='leftdw' value="+$("#program_"+selectid).find("#leftdw").val()+">");

                var formData = new FormData();
formData.append('file', $('#from_'+selectid).find("#file1")[0].files[0]);
$.ajax({
    url: domain.testUrl+"/Threeinjection/programManagement/FTPupload",
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
   // logo=res;
	//res=logo;
console.log(res);
     $('#from_'+selectid).find("#hfile1").val(JSON.parse(res).data)
}).fail(function(res) {
  
});	 
  //if(){
 // }
//
 // preview.style.backgroundImage = 'url(' + newUrl + ')';
 };
}
});

$('#from_'+selectid).find("#file2").change(function() {
	            var file = this.files[0];   	         
                // 确认选择的文件是图片                
                if(file.type.indexOf("image") == 0) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);                    
                    reader.onload = function(e) {
                        // 图片base64化
						var newUrl = this.result;
				//	alert(newUrl);    
  //if(){
//$("#program_"+selectid).html($('#from_'+selectid).find("textarea").val()+"<input type='hidden' id='leftdw' value="+$("#program_"+selectid).find("#leftdw").val()+">");


$("#program_"+selectid).html("<img src='"+newUrl +"'  class='img-rounded' style=height:"+$("#from_"+selectid).find("#high").val()+"px;>"+"<input type='hidden' id='leftdw' value="+$("#program_"+selectid).find("#leftdw").val()+">");
 // }
//
 // preview.style.backgroundImage = 'url(' + newUrl + ')';

var formData = new FormData();
formData.append('file', $('#from_'+selectid).find("#file2")[0].files[0]);
$.ajax({
    url: domain.testUrl+"/Threeinjection/programManagement/FTPupload",
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
   // logo=res;
	//res=logo;
   

     $('#from_'+selectid).find("#hfile2").val(JSON.parse(res).data)
}).fail(function(res) {
  
});	 

 };
}
});

  $('#from_'+selectid).find('.spinner .btn:first-of-type').eq(0).on('click', function() {  

	//$('.spinner input').val(parseInt($('.spinner input').val()) + 8);  

 $('#from_'+selectid).find("#left").val(parseInt($('#from_'+selectid).find("#left").val()) +8);

   var left=parseInt($("#jwidth").val())-parseInt($('#from_'+selectid).find("#width").val());

//var lefttow=parseInt(leftwz)+parseInt($('#from_'+selectid).find("#left").val());
var lefttow=parseInt($('#program_'+selectid).find("#leftdw").val())+parseInt($('#from_'+selectid).find("#left").val());


if($('#from_'+selectid).find("#left").val()>left){

	 $('#from_'+selectid).find("#left").val(left)
	 // left=parseInt(leftwz)+parseInt(left);
	  left=parseInt($('#program_'+selectid).find("#leftdw").val())+parseInt(left);

     $("#program_"+selectid).css("left",left+"px");
	// $("#program_"+selectid).css("margin-left",left+"px");

	 return;
}

$("#program_"+selectid).css("left",lefttow+"px");

	
  });  
   $('#from_'+selectid).find('.spinner .btn:last-of-type').eq(0).on('click', function() { 

		// $('.spinner input').val(parseInt($('.spinner input').val()) - 8);  
		
	   $('#from_'+selectid).find("#left").val(parseInt($('#from_'+selectid).find("#left").val()) -8);

   var left=parseInt($("#jwidth").val())-parseInt($('#from_'+selectid).find("#width").val());

//var lefttow=parseInt(leftwz)+parseInt($('#from_'+selectid).find("#left").val());
var lefttow=parseInt($('#program_'+selectid).find("#leftdw").val())+parseInt($('#from_'+selectid).find("#left").val());


if($('#from_'+selectid).find("#left").val()>left){

	 $('#from_'+selectid).find("#left").val(left)
	 // left=parseInt(leftwz)+parseInt(left);
	  left=parseInt($('#program_'+selectid).find("#leftdw").val())+parseInt(left);

     $("#program_"+selectid).css("left",left+"px");
	// $("#program_"+selectid).css("margin-left",left+"px");

	 return;
}

$("#program_"+selectid).css("left",lefttow+"px");
   
  });  


//

$('#from_'+selectid).find('.spinner .btn:first-of-type').eq(1).on('click', function() {  

	//$('.spinner input').val(parseInt($('.spinner input').val()) + 8);  


 $('#from_'+selectid).find("#top").val(parseInt($('#from_'+selectid).find("#top").val()) +8);

  var topvalue=parseInt($("#jhigh").val())-parseInt($('#from_'+selectid).find("#high").val());

//var toptow=parseInt(leftwz)+parseInt($('#from_'+selectid).find("#top").val());

if($('#from_'+selectid).find("#top").val()>topvalue){
 // alert(top);
//	 $("#program_"+selectid).css("margin-top",topvalue+"px"); 
//topvalue==parseInt(leftwz)+$('#from_'+selectid).find("#top").val();
topvalue==parseInt($('#program_'+selectid).find("#leftdw").val())+parseInt($('#from_'+selectid).find("#top").val());

 $("#program_"+selectid).css("top",topvalue+"px"); 
	 $('#from_'+selectid).find("#top").val(topvalue);
	//
	return;
}
 // $("#program_"+selectid).css("margin-top",$('#from_'+selectid).find("#top").val()+"px");
$("#program_"+selectid).css("top",$('#from_'+selectid).find("#top").val()+"px");

	
  });  
   $('#from_'+selectid).find('.spinner .btn:last-of-type').eq(1).on('click', function() { 

	 $('#from_'+selectid).find("#top").val(parseInt($('#from_'+selectid).find("#top").val()) -8);

  var topvalue=parseInt($("#jhigh").val())-parseInt($('#from_'+selectid).find("#high").val());

//var toptow=parseInt(leftwz)+parseInt($('#from_'+selectid).find("#top").val());

if($('#from_'+selectid).find("#top").val()>topvalue){
 // alert(top);
//	 $("#program_"+selectid).css("margin-top",topvalue+"px"); 
//topvalue==parseInt(leftwz)+$('#from_'+selectid).find("#top").val();
topvalue==parseInt($('#program_'+selectid).find("#leftdw").val())+parseInt($('#from_'+selectid).find("#top").val());

 $("#program_"+selectid).css("top",topvalue+"px"); 
	 $('#from_'+selectid).find("#top").val(topvalue);
	//
	return;
}
 // $("#program_"+selectid).css("margin-top",$('#from_'+selectid).find("#top").val()+"px");
$("#program_"+selectid).css("top",$('#from_'+selectid).find("#top").val()+"px");
   
  });  




























$('#from_'+selectid).find('.spinner .btn:first-of-type').eq(2).on('click', function() {  

	//$('.spinner input').val(parseInt($('.spinner input').val()) + 8);  
 $('#from_'+selectid).find("#width").val(parseInt($('#from_'+selectid).find("#width").val()) +8);

  
     if(parseInt($('#from_'+selectid).find("#width").val())>parseInt($("#jwidth").val())){

$('#from_'+selectid).find("#left").val(0);
  $("#program_"+selectid).css("width",$("#jwidth").val());
$('#from_'+selectid).find("#width").val($("#jwidth").val());



// $('#program_'+selectid).css("left",leftwz+"px");

$('#program_'+selectid).css("left",$('#program_'+selectid).find("#leftdw").val()+"px");
return;
  }else{




$("#program_"+selectid).css("width",$('#from_'+selectid).find("#width").val());

   if($("#program_"+selectid).find("img").val()==""){

     $("#program_"+selectid).find("img").css("width",parseInt($('#from_'+selectid).find("#width").val())-4);
   
   }

   if(parseInt($('#from_'+selectid).find("#width").val())==parseInt($("#jwidth").val())){


  //console.log(leftwz);

	 $('#from_'+selectid).find("#left").val(0);


     // console.log($("#program").css("left"));

	  //$('#program_'+selectid).css("left",leftwz+"px");
          $('#program_'+selectid).css("left",$('#program_'+selectid).find("#leftdw").val()+"px");

	
	  
	 // return;
}


var left=parseInt($('#from_'+selectid).find("#left").val())+parseInt($('#from_'+selectid).find("#width").val());
if(left>$("#jwidth").val()){
//left=parent(left)-parseInt($("#jwidth").val());
var reg = new RegExp("px","g");

//console.log(left);

//left=parseInt($('#program_'+selectid).css("left").replace(reg, ""))-parseInt(left);


left=parseInt($('#program_'+selectid).css("left").replace(reg, ""))-parseInt($('#from_'+selectid).find("#left").val());

$('#from_'+selectid).find("#left").val(0);
console.log(left);
$("#program_"+selectid).css("left",left+"px");

//$('#from_'+selectid).find("#width").val( $("#jwidth").val());


//$('#from_'+selectid).find("#width").val(parseInt($("#jwidth").val())-parseInt($('#from_'+selectid).find("#left").val()));
//$("#program_"+selectid).css("width",parseInt($("#jwidth").val());
       //console.log(left);
   }
  }

	
  });  
   $('#from_'+selectid).find('.spinner .btn:last-of-type').eq(2).on('click', function() { 

 $('#from_'+selectid).find("#width").val(parseInt($('#from_'+selectid).find("#width").val()) -8);

  
 if(parseInt($('#from_'+selectid).find("#width").val())>parseInt($("#jwidth").val())){

$('#from_'+selectid).find("#left").val(0);
  $("#program_"+selectid).css("width",$("#jwidth").val());
$('#from_'+selectid).find("#width").val($("#jwidth").val());



// $('#program_'+selectid).css("left",leftwz+"px");

$('#program_'+selectid).css("left",$('#program_'+selectid).find("#leftdw").val()+"px");
return;
  }else{




$("#program_"+selectid).css("width",$('#from_'+selectid).find("#width").val());

   if($("#program_"+selectid).find("img").val()==""){

     $("#program_"+selectid).find("img").css("width",parseInt($('#from_'+selectid).find("#width").val())-4);
   
   }

   if(parseInt($('#from_'+selectid).find("#width").val())==parseInt($("#jwidth").val())){


  //console.log(leftwz);

	 $('#from_'+selectid).find("#left").val(0);


     // console.log($("#program").css("left"));

	  //$('#program_'+selectid).css("left",leftwz+"px");
          $('#program_'+selectid).css("left",$('#program_'+selectid).find("#leftdw").val()+"px");

	
	  
	 // return;
}


var left=parseInt($('#from_'+selectid).find("#left").val())+parseInt($('#from_'+selectid).find("#width").val());
if(left>$("#jwidth").val()){
//left=parent(left)-parseInt($("#jwidth").val());
var reg = new RegExp("px","g");

//console.log(left);

//left=parseInt($('#program_'+selectid).css("left").replace(reg, ""))-parseInt(left);


left=parseInt($('#program_'+selectid).css("left").replace(reg, ""))-parseInt($('#from_'+selectid).find("#left").val());


console.log(left);
$("#program_"+selectid).css("left",left+"px");

//$('#from_'+selectid).find("#width").val( $("#jwidth").val());


//$('#from_'+selectid).find("#width").val(parseInt($("#jwidth").val())-parseInt($('#from_'+selectid).find("#left").val()));
//$("#program_"+selectid).css("width",parseInt($("#jwidth").val());
       //console.log(left);
   }
  }

});
$('#from_'+selectid).find('.spinner .btn:first-of-type').eq(3).on('click', function() {  

 $('#from_'+selectid).find("#high").val(parseInt($('#from_'+selectid).find("#high").val())+8);

var jhigh=parseInt($("#jhigh").val());

  if($('#from_'+selectid).find("#high").val()>jhigh){
		$("#program_"+selectid).css("height",jhigh+"px");
		$('#from_'+selectid).find("#high").val(jhigh);
      
     if($("#program_"+selectid).find("img").val()==""){


     $("#program_"+selectid).find("img").css("height",jhigh+"px");
   
     
   }
 $('#program_'+selectid).css("top",0+"px");
		return;
  }
  $("#program_"+selectid).css("height",$('#from_'+selectid).find("#high").val());

   if($("#program_"+selectid).find("img").val()==""){

   $("#program_"+selectid).find("img").css("height",parseInt($('#from_'+selectid).find("#high").val())-4);
  
   }
var top=parseInt($('#from_'+selectid).find("#top").val())+parseInt($('#from_'+selectid).find("#high").val());

//console.log(top);

if(top>$("#jhigh").val()){
 var reg = new RegExp("px","g");
  top=parseInt($('#program_'+selectid).css("top").replace(reg, ""))-parseInt($('#from_'+selectid).find("#top").val())
  $("#program_"+selectid).css("top",top+"px");
   $('#from_'+selectid).find("#top").val(0);
}

   if(parseInt($('#from_'+selectid).find("#high").val())==parseInt($("#jhigh").val())){


  //console.log(leftwz);

	 $('#from_'+selectid).find("#top").val(0);


     // console.log($("#program").css("left"));

	  $('#program_'+selectid).css("top",0+"px");


	
	 // return;
}


});
   $('#from_'+selectid).find('.spinner .btn:last-of-type').eq(3).on('click', function() { 
 $('#from_'+selectid).find("#high").val(parseInt($('#from_'+selectid).find("#high").val()) -8);

var jhigh=parseInt($("#jhigh").val());
   if($('#from_'+selectid).find("#high").val()>jhigh){
		$("#program_"+selectid).css("height",jhigh+"px");
		$('#from_'+selectid).find("#high").val(jhigh);
      
     if($("#program_"+selectid).find("img").val()==""){


     $("#program_"+selectid).find("img").css("height",jhigh+"px");
   
     
   }
 $('#program_'+selectid).css("top",0+"px");
		return;
  }
  $("#program_"+selectid).css("height",$('#from_'+selectid).find("#high").val());

   if($("#program_"+selectid).find("img").val()==""){

   $("#program_"+selectid).find("img").css("height",parseInt($('#from_'+selectid).find("#high").val())-4);
  
   }
var top=parseInt($('#from_'+selectid).find("#top").val())+parseInt($('#from_'+selectid).find("#high").val());

//console.log(top);

if(top>$("#jhigh").val()){
 var reg = new RegExp("px","g");
  top=parseInt($('#program_'+selectid).css("top").replace(reg, ""))-parseInt($('#from_'+selectid).find("#top").val())
  $("#program_"+selectid).css("top",top+"px");
}

   if(parseInt($('#from_'+selectid).find("#high").val())==parseInt($("#jhigh").val())){


  //console.log(leftwz);

	 $('#from_'+selectid).find("#top").val(0);


     // console.log($("#program").css("left"));

	  $('#program_'+selectid).css("top",0+"px");


	
	 // return;
}

   });

   $('#from_'+selectid).find('.spinner .btn:first-of-type').eq(4).on('click', function() { 
 $('#from_'+selectid).find("#inspeed").val(parseInt($('#from_'+selectid).find("#inspeed").val()) +1);
   });
    $('#from_'+selectid).find('.spinner .btn:last-of-type').eq(4).on('click', function() { 
 $('#from_'+selectid).find("#inspeed").val(parseInt($('#from_'+selectid).find("#inspeed").val()) -1);

	});
   $('#from_'+selectid).find('.spinner .btn:first-of-type').eq(5).on('click', function() { 
 $('#from_'+selectid).find("#staytime").val(parseInt($('#from_'+selectid).find("#staytime").val()) +1);
   });
    $('#from_'+selectid).find('.spinner .btn:last-of-type').eq(5).on('click', function() { 
 $('#from_'+selectid).find("#staytime").val(parseInt($('#from_'+selectid).find("#staytime").val()) -1);

	});
 
});
var zt=true;
$("#addjm").click(function(){
	zt=true;
var datadd = {};
if($("#order").val().length==0){
 swal("OMG!", "请选择订单！", "error");
return;
}
if($("#festivalname").val().length==0){
 swal("OMG!", "请输入节目名称", "error");
return;
}
if($("#starttime").val().length==0){
 swal("OMG!", "请输入播放起始日期 ", "error");
return;
}
if($("#endtime").val().length==0){
 swal("OMG!", "请输入播放结束日期", "error");
return;
}
if($("#starttime").val()>$("#endtime").val()){

 swal("OMG!", "播放开始日期不能大于播放结束日期", "error");
return;
}




if($("#timeid").val().length==0){
 swal("OMG!", "请输入开始时段 ", "error");
return;
}
if($("#starthour").val().length==0){
 swal("OMG!", "请输入结束时段", "error");
return;
}

if(getNowFormatDate()+" "+$("#timeid").val()>getNowFormatDate()+" "+$("#starthour").val()){
 swal("OMG!", "播放开始时段不能大于播放结束时段", "error");
return;
}
if($("#material li").length==0){
swal("OMG!", "请填写分区信息", "error");
 return;
}


datadd["program"] =({"order_id":$("#order").val(),
"type":$("#type").val(),
"starttime":$("#starttime").val()+" 00:00:00",
"endtime":$("#endtime").val()+" 00:00:00",
"playtime":$("#playtype").val()=="1"?$("#playtime").val():"255",
"devicetype":$("#devicetype").val(),
"festivalname":$("#festivalname").val(),
"isplayvoice":$("#isplayvoice").val(),
"playtype":$("#playtype").val()
});

var programtimeinfolist=new Array();
//1535738400000
   var startDate =$("#starttime").val()+" "+$("#timeid").val();
//alert($("#timeid").val());
	startDate= startDate.replace(new RegExp("-","gm"),"/");
	alert(startDate);
	var startDateM = (new Date(startDate)).getTime(); //得到毫秒数
    // alert(startDateM);
	 var startDate2 =$("#endtime").val()+" "+$("#starthour").val();
    startDate2= startDate2.replace(new RegExp("-","gm"),"/");
	var startDateM2 = (new Date(startDate2)).getTime(); //得到毫秒数

//alert(startDateM);
//return;
programtimeinfolist.push(

	{"timeid":"0","starthour":startDateM,
"endhour":startDateM2,"orderid":$("#order").val()

}
);
var programzeroinfo=new  Array();
var materialinfo=new  Array();
var j=0;
$(".col-md-9").find(".form-inline").each(function(i){

if(i>1){
	j++;
//type
 programzeroinfo.push({
"zeroindex":j,	
"type":$(this).find("#type").val(),
"left":$(this).find("#left").val(),
"top":$(this).find("#top").val(),
"width":$(this).find("#width").val(),
"high":$(this).find("#high").val(),
"order_id":$("#order").val()});
i=i-2;
var typetext=$("#material li a").eq(i).text();
var type=2;
if(typetext==" 文本"){
     type=0;
}
if(typetext==" 图片"){
 type=1;
}
var path="";
var size="";
if(type==1){
	if($(this).find("#file1").val()==""){
		zt=false;
 swal("OMG!", "请检测分区无法上传空图片", "error");
	return false;
}
path=typeof($(this).find("#hfile1").val())=="undefined"?"":$(this).find("#hfile1").val();
size=parseInt($(this).find("#file1")[0].files[0].size)/1024;
}
if(type==2){
	zt=false;
	if($(this).find("#file2").val()==""){
   swal("OMG!", "请检测分区无法上传空动画", "error");
	return false;
}
path=typeof($(this).find("#hfile2").val())=="undefined"?"":$(this).find("#hfile2").val();
size=parseInt($(this).find("#file2")[0].files[0].size)/1024;
}

//<option value="#000000">黑色</option>
													 	//<option value="#FF0000">红色</option>
													//<option value="#00FF00">绿色</option>
														//<option value="#0000FF">蓝色</option>
													//	<option value="#C0C0C0">灰色</option>
														//<option value="#FFFFFF">白色</option>
//var  fontcolor=$(this).find("#fontsizeadd").val()=="#000000"?0:
//$(this).find("#fontsizeadd").val()=="#FF0000"?1:$(this).find("#fontsizeadd").val()=="#00FF00"
var fontcolor=fontcolorval($(this).find("#fontcolor").val());
var backcolor=fontcolorval($(this).find("#backcolor").val());
//alert(path);
//return;
//files[0].size
 materialinfo.push({
//"zeroindex":j,	model 
"text":typeof($(this).find("#fosizeval").val())=="undefined"?"":$(this).find("#fosizeval").val(),
"type":type,
"path":path,
"size":parseInt(size),
"model":0,
"intype":$(this).find("#intype").val(),
"inspeed":$(this).find("#inspeed").val(),
"fontcolor":typeof($(this).find("#fontcolor").val())=="undefined"?0:fontcolor,
"fontsize":typeof($(this).find("#fontsizeadd").val())=="undefined"?0:$(this).find("#fontsizeadd").val(),
"backcolor":backcolor,
"staytime":$(this).find("#staytime").val(),
"order_id":$("#order").val(),"zeroindex":j});
datadd["programtimeinfolist"]=programtimeinfolist;
datadd["programzeroinfo"]=programzeroinfo;
datadd["materialinfo"]=materialinfo;
}
});
//alert(zt);
if(zt){
//console.log(JSON.stringify(datadd));
domain.ajaxUrl({
        method: 'POST',
		url: domain.testUrl+"/Threeinjection/programManagement/programadd",
		data:{"programadd":JSON.stringify(datadd),sessionid:sessionStorage.getItem("sid")},
        //data: {sessionid:sessionStorage.getItem("sid")},
       // datatype:"JSON",
        success: function (response) {

    //  console.log(response);

	response=JSON.parse(response);
   if(response.code=="200"){
	 swal("success!", "保存成功", "success");
	 setTimeout(function(){
    //  parent.Addtabs.close("tab_101");
    // $("#tab_tab_101").remove();
     //parent.addTabs({id:'17',title: '节目列表',close: true,url: '?#/page/Program/list'});
	  },500);
   }
}
});
}
});


//预览图片 
window.fileChange=function(ths){

           
			
            
};
 //显示日期插件
$('.date_picker').date_input();

$("body").removeAttr("style");

//$("body").css("overflow-x","hidden");

});
 window.onload = function ()
    {

	
    
	}
	//生成GUID的算法
	window.uuid=function() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";
    var uuid = s.join("");
    return uuid;
}

function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

window.fontcolorval=function(val){
var fontcolor="";
switch (val)
{
case "#000000":
fontcolor=0;
  break;
 case "#FF0000":
fontcolor=1;
  break;
 case "#00FF00":
fontcolor=2;
  break;
 case "#0000FF":
  fontcolor=3;
  break;
case "#C0C0C0":
  fontcolor=4;
  break;
 case "#FFFFFF":
  fontcolor=5;
  break;
};
return fontcolor;
}
</script>

